<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
		<script src="js/Vue.js"></script>
		<script type="text/javascript" src="js/vue-resource.min.js"></script>
		<style>
			body {
				margin: 0px;
				background-color: #F5F5F5;
			}
			
			h1 {
				background-color: #3D83D9;
				margin: 0px;
				height: 40px;
				text-align: center;
			}
			
			.div-gap {
				margin: 20px;
				background-color: #FFFFFF;
			}
			
			.div-bgNo {
				margin: 20px;
			}
			
			.div-border {
				border: 5px;
				border-radius: 5px;
			}
			
			.h200 {
				height: 200px;
			}
			
			input {
				border: 0px;
				width: 100%;
				height: 30px;
				line-height: 30px;
			}
			
			button {
				background-color: #0074BA;
				margin: 00px;
				width: 100%;
				height: 30px;
				padding: 0px;
			}
			
			textarea {
				border: 0px;
				width: 100%;
				height: 45px;
				resize: none;
			}
		</style>
		<script>
			//全局记忆
			var logins;
			var baseUrl = "http://localhost:59607/api/values";
			var baseUrl2 = "http://localhost:59607/api/values?account='admin'&pws='2222'";
			//未挂载，只是实例化vue
			var unmounted = {
				//登录数据(直接挂载)
				login: function() {
					return new Vue({
						el: "#j_form",
						data: {
							account: "",
							pws: "",
						},
						//观察
						watch: {
							pws: function(newpws) {
								if(newpws != 123456) {
									console.log("密码为123456")
								}
							}
						}
					})
				},
				//登录事件(后挂载)
				loginEvent: function() {
					return new Vue({
						methods: {
							//登录事件
							signIn: function() {
								Vue.http.get(baseUrl, {
										params: {
											account: logins.account,
											pws: logins.pws
										}
									})
									.then(function(response) {
											//成功回调
											alert(response.data)
										},
										function(response) {
											alert("错误信息")
										})
							}
						}
					})
				}
			}
			//挂载
			$(function() {
				var vm = new Vue({
					//元素
					el: "#j_body",
					//数据
					data: {
						account: "",
						pws: "",
					},
					//观察
					watch: {
						pws: function(newpws) {
							if(newpws != 123456) {
								console.log("密码为123456")
							}
						}
					},
					//方法
					methods: {
						//登录事件
						signIn: function() {
							Vue.http.get(baseUrl, {
									params: {
										account: this.account,
										pws: this.pws
									}
								})
								.then(function(response) {
										//成功回调
										alert(response.data)
									},
									function(response) {
										alert("错误信息")
									})
						}
					}
				})
				//logins = unmounted.login();
				//unmounted.loginEvent().$mount("#j_sub");
			})
		</script>
	</head>

	<body>
		<h1>登录</h1>
		<div id="j_body">
			<!--1.输入框区域-->
			<div id="j_login">
				<form id="j_form">
					<input type="reset" style="display:none;" />
					<div class="div-bgNo">
						<label>登录页：<span></span></label>
					</div>

					<div class="div-gap">
						<input v-model="account" placeholder="请输入账号">
					</div>
					<div class="div-gap">
						<input v-model="pws" placeholder="请输入密码">
					</div>
				</form>
			</div>
			<!--2.按钮区域-->
			<div class="div-gap">
				<button v-on:click="signIn" id="j_sub">提交</button>
			</div>
		</div>
	</body>

</html>